<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>LT 的后台</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="后台系统">
    <meta name="description" content="勉强算个管理系统">
    <meta name="author" content="yinqi">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--        头文件-->

        <div class="headerpage"></div>
        <script>
            $(".headerpage").load("header.html");
        </script>

        <!--页面主要内容-->
        <div class="container">
        <main class="lyear-layout-content">
            <div class="card">
                <form id="f1" enctype="multipart/form-data">
                    <div class="form-group col-md-4">
                        <label for="a">上传图片</label>
                        <input type="file" name="file"  accept="image/**" id="a"/>
                    </div>

                <div class="form-group col-md-12"><input id="submit" type="submit" value="上传" class="btn btn-danger"/></div>

                    <div class="col-md-3"></div>
                    <img id="id_img"   src="./images/img-slide-2.jpg" width="400" height="400">

            </form>
            </div>


        </main>
        </div>
        <script>
            let testData;
            $('#a').change(function () {
                // 先获取用户上传的文件对象
                let fileObj = this.files[0];
                // 生成一个文件读取的内置对象
                let fileReader = new FileReader();
                // 将文件对象传递给内置对象
                fileReader.readAsDataURL(fileObj); //这是一个异步执行的过程，所以需要onload回调函数执行读取数据后的操作
                // fileReader
                // 将读取出文件对象替换到img标签
                fileReader.onload = function(){  // 等待文件阅读器读取完毕再渲染图片
                    $('#id_img').attr('src',fileReader.result)
                }
            });


            $("#f1").submit(function () {
                var data = new FormData($("#f1")[0]);
                $.ajax({
                    url: "./addPic",
                    type: "post",
                    //不设置内容类型
                    contentType: false,
                    //不处理数据
                    processData: false,
                    //必须设置，保证你提交的数据和后台返回是同步的
                    async: false,
                    data: data,
                    dataType: 'json',
                    success: function (data) {
                        // testData=data
                        // console.log(data)
                        //
                        // // data=JSON.parse(data);
                        // if(data.msg == "success"){
                        //     alert(data.msg );
                        // }else {
                        //     alert(data.msg );
                        // }
                        alert("添加")
                    },
                error:function () {
                    alert("请添加了再上传")
                }
                });
                return false;
            });
        </script>
        <!--End 页面主要内容-->
    </div>
</div>


<!--图表插件-->


</body>
</html>
